<template>
	<view class="pages">

		<!-- 自定义导航栏 -->
		<u-navbar leftIcon=' ' :title="chamberObj.nickname || '成员信息'" titleStyle='font-weight:bold;color:white'
			bgColor='transparent' :autoBack="true">
		</u-navbar>

		<image src="https://yjgs.jsonbug.com/storage/default/20250312/shanghui-top.png"
			style="width: 100%;height: 200rpx;"></image>

		<view class="flex ac jc mt-30 ">
			<view @click="handleClick(1)" :class="[currentType === 1 ? 'active-btn' : 'inactive-btn', 'btn', 'bb']">
				{{chamberObj.config || '商(协)会'}}分类
			</view>
			<view @click="handleClick(2)"
				:class="[currentType === 2 ? 'active-btn' : 'inactive-btn', 'btn', 'bb', 'ml-40']">
				行业分类
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-box flex mt-20">
			<!-- 左侧分类列表 -->
			<scroll-view scroll-y class="category-list">
				<view class="category-item" :class="{ active: currentCategory === 0 }" @click="switchCategory(0)">
					全部
				</view>
				<view v-for="(item, index) in categoryList" :key="index" class="category-item line-1 pl-10 pr-10"
					:class="{ active: currentCategory === item.id }" @click="switchCategory(item.id)">
					{{item.title || ''}}
				</view>
			</scroll-view>

			<!-- 右侧成员列表 -->
			<view class="member-list">
				<!-- 固定标题 -->
				<view v-if="hTitl" class="category-header">
					{{hTitl}} ({{totle || 0}}人)
				</view>

				<!-- 可滚动的成员列表容器 -->
				<scroll-view scroll-y class="member-scrollable-container" @scrolltolower="loadMoreData"
					lower-threshold="50">
					<!-- 成员卡片 - 静态结构 -->
					<view @click="toPage(item)" v-for="(item,index) in userList" :key="index" class="member-card">
						<!-- 头像区域 -->
						<view class="member-avatar">
							<image
								:src="$timer.ensureUrl(item.avatar) || 'https://yjgs.jsonbug.com/storage/default/20250324/moren.png'"
								mode="aspectFill"></image>
						</view>
						<!-- 成员信息 -->
						<view class="member-info">
							<!-- 名称和职位 -->
							<view class="name-position">
								<text class="member-name">{{item.name || ''}}</text>
								<block v-if="currentType == 1 && item.title">
									<view class="position-tag" style="background-color: #F00000;border-radius: 2rpx;">
										{{item.title || ''}}
									</view>
								</block>
								<view class="position-tag" style="border-radius: 2rpx;"
									v-if="currentType == 2 && item.card.position.position">
									{{item.card.position.position || ''}}
								</view>
							</view>
							<!-- 标签 -->
							<text class="fs-26 c-666 line-1"
								v-if="currentType == 1">{{item.card.position.position || ''}}</text>
							<view v-if="currentType == 2" class="flex ac line-1">
								<view v-for="(_item,_index) in $timer.strToArr(item.industry_info,false)" :key="_index"
									class="category-tag mr-10">
									<text>#{{_item || ''}}</text>
								</view>
							</view>
							<!-- 公司名称 -->
							<view class="company-name mt-5 line-1">{{item.card.position.company_name || ''}}</view>
						</view>
					</view>

					<!-- 使用uni-load-more组件替代自定义加载提示 -->
					<uni-load-more :status="status" />
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		comPosition,
		comGetUserList
	} from '@/api/extend.js';
	export default {
		components: {},
		props: {},
		computed: {
			...configMap({}, mapGetters(['isLogin', 'uid', 'userInfo'])),
			chamberObj() {
				return this.$store.state.extend.chamberObj
			}
		},
		data() {
			return {
				hTitl: '', //行业标题
				current_page: 1, // 当前页
				totle: 0,
				currentType: 1,
				currentCategory: 0,
				categoryList: [],
				userList: [],
				loading: false,
				status: 'loading',
			};
		},
		created() {
			this.getComPositionFunc()
		},
		methods: {
			toPage(item) {
				
				if (!this.isLogin) {
					toLogin();
					return;
				}
				
				let card = uni.getStorageSync('userCardInfo');
				if (!card.id) {
					uni.showModal({
						content: `检测到您还未创建名片，名片让对接更高效，立即创建！`,
						cancelText: '暂不创建',
						confirmText: '立即创建',
						success(res) {
							if (res.cancel) { // 暂不创建
								if (item?.card?.id) {
									uni.navigateTo({
										url: '/pages/extend/connection/index_desc?id=' + item?.card?.id
									})
								} else {
									uni.showToast({
										title: '该用户还未创建名片信息',
										icon: 'none'
									})
								}
							} else { // 立即创建
								uni.navigateTo({
									url: `/pages/extend/connection/create`
								})
							}
						}
					})
					return;
				}

				if (item?.card?.id) {
					uni.navigateTo({
						url: '/pages/extend/connection/index_desc?id=' + item?.card?.id
					})
				} else {
					uni.showToast({
						title: '该用户还未创建名片信息',
						icon: 'none'
					})
				}
			},
			// 修改loadMoreData方法
			loadMoreData() {
				// 如果已经加载完所有数据或正在加载中，则不再继续请求
				if (this.userList.length >= this.totle || this.loading) return;

				this.loading = true; // 开始加载，设置加载状态
				this.status = 'loading'; // 设置uni-load-more的状态为loading
				this.current_page++;
				comGetUserList({
					page: this.current_page,
					limit: 10,
					com_id: this.chamberObj.id,
					position_id: this.currentType == 1 ? this.currentCategory : null,
					industry_one_id: this.currentType == 2 ? this.currentCategory : null
				}).then(res => {
					// 将新数据追加到现有数据中
					this.userList = [...this.userList, ...res?.data?.data];
					this.current_page = res?.data?.current_page;
					this.totle = res?.data?.total;
					this.loading = false; // 加载完成，重置加载状态

					// 根据数据情况设置状态
					if (this.userList.length >= this.totle) {
						this.status = 'noMore'; // 没有更多数据
					} else {
						this.status = 'more'; // 可以加载更多
					}
				}).catch(err => {
					this.loading = false; // 出错时也要重置加载状态
					this.status = 'more'; // 出错时，仍然允许重新加载
				})
			},
			comGetUserListFunc() {
				this.status = 'loading'; // 设置加载状态
				this.loading = true;
				comGetUserList({
					page: this.current_page,
					limit: 10,
					com_id: this.chamberObj.id,
					position_id: this.currentType == 1 ? this.currentCategory : null,
					industry_one_id: this.currentType == 2 ? this.currentCategory : null
				}).then(res => {
					this.userList = res?.data?.data;
					this.current_page = res?.data?.current_page;
					this.totle = res?.data?.total;
					this.getTitleFunc();
					this.loading = false;

					// 根据数据情况设置状态
					if (this.userList.length === 0) {
						this.status = 'noMore'; // 没有数据
					} else if (this.userList.length >= this.totle) {
						this.status = 'noMore'; // 没有更多数据
					} else {
						this.status = 'more'; // 可以加载更多
					}
				}).catch(err => {
					this.loading = false;
					this.status = 'more'; // 出错时，仍然允许重新加载
					uni.showToast({
						title: err?.message || '加载失败',
						icon: 'none'
					});
				})
			},
			getComPositionFunc() {
				comPosition({
					com_id: this.chamberObj.id,
					deep: 1,
					type: this.currentType
				}).then(res => {
					this.categoryList = res.data;
					this.comGetUserListFunc();
				})
			},
			handleClick(type) {
				this.currentCategory = 0;
				this.currentType = type;
				// 重置页码
				this.current_page = 1;
				// 清空现有数据列表
				this.userList = [];
				this.getComPositionFunc();
			},
			switchCategory(categoryId) {
				this.currentCategory = categoryId;
				// 重置页码
				this.current_page = 1;
				// 清空现有数据列表
				this.userList = [];
				this.comGetUserListFunc();
			},
			getTitleFunc() {
				if (this.currentCategory == 0) {
					this.hTitl = '全部'
				} else {
					let index = this.categoryList.findIndex(item => item.id == this.currentCategory);
					this.hTitl = this.categoryList[index]?.title || '';
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.pages {
		width: 100%;

	}

	.active-btn {
		background-color: #C40001;
		color: white;
	}

	.inactive-btn {
		background-color: white;
		color: #C40001;
	}

	.btn {
		border-radius: 12rpx;
		line-height: 80rpx;
		text-align: center;
		width: 40%;
		height: 80rpx;
		border: 1rpx solid #C40001;
	}

	// 内容区域样式
	.content-box {
		padding: 0 20rpx;
		height: 68vh;
		/* 设置固定高度为视窗高度的75% */
		overflow: hidden;
		/* 防止内容溢出 */
	}

	// 左侧分类列表
	.category-list {
		background-color: white;
		width: 180rpx;
		flex-shrink: 0;
		height: 100%;
		/* 使用100%高度填充父容器 */
		overflow-y: auto;
		/* 添加垂直滚动 */
	}

	.category-item {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #333;
		text-align: center;
		margin-bottom: 10rpx;
		position: relative;

		&.active {
			color: #C40001;
			font-weight: bold;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 30rpx;
				background-color: #C40001;
				border-radius: 3rpx;
			}
		}
	}

	// 右侧成员列表
	.member-list {
		flex: 1;
		padding-left: 20rpx;
		height: 100%;
		/* 使用100%高度填充父容器 */
		display: flex;
		flex-direction: column;
	}

	.category-header {
		box-sizing: border-box;
		padding: 10rpx;
		background-color: white;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		flex-shrink: 0;
		/* 防止标题被压缩 */
	}

	/* 新增可滚动容器 */
	.member-scrollable-container {
		flex: 1;
		overflow-y: auto;
		/* 只在成员列表区域添加滚动 */
	}

	// 成员卡片
	.member-card {
		background-color: #FFF;
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.member-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.member-info {
		flex: 1;
	}

	.name-position {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.member-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-right: 20rpx;
	}

	.position-tag {
		display: inline-block;
		background-color: #4A90E2;
		color: #FFF;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
	}

	.category-tag {
		display: inline-block;
		background-color: #F5F5F5;
		color: #666;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		margin-bottom: 10rpx;
	}

	.company-name {
		font-size: 26rpx;
		color: #666;
	}
</style>